<!--
 * @Descripttion: 库存查询列表
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-11 19:53:57
 -->
<template>
  <div class="app-container">
    <div>
      <el-card shadow="never" class="oper-btn-card">
        <div class="clearfix">
          <div class="fr">
            <el-checkbox
              v-model="searchData.isCancle"
              true-label="0"
              false-label="1"
              border
              @change="onCheckBoxChange"
            >不显示作废单据</el-checkbox>
            <el-input
              v-model="searchData.keywords"
              clearable
              style="width: 300px"
              placeholder="搜索账户名称，备注..."
            >
              <el-button slot="append" icon="el-icon-search" type="primary" :loading="btnLoading.search" @click="btnSearch()" />
            </el-input>
          </div>
        </div>
      </el-card>
      <vxe-grid
        ref="table"
        class="grid"
        border
        resizable
        highlight-hover-row
        :row-class-name="getRowClassName"
        :loading="tableLoading.table"
        :edit-config="{trigger: 'click', mode: 'row'}"
        :columns="columnsData"
        :data="tableData.table"
      />
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.rows"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.page"
        :total="pageInfo.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { listData as getListData } from '@/api/finance/amount-log.js'
import Affix from '@/components/Affix'
import transdetail from './trans-detail'
import { getBusinessTime } from '@/libs/util.js'

export default {
  name: 'AmountlogList',
  filters: {
  },
  // eslint-disable-next-line vue/no-unused-components
  components: { Affix, transdetail },
  mixins: [oftenuse],
  props: {},
  data() {
    return {
      searchData: { isCancle: '0' },
      currentRow: {},
      isShowDetail: false,
      optionsData: { direction: [{ value: '0', label: '支出' }, { value: '1', label: '收入' }] },
      columnsData: [
        { type: 'seq', title: '序号', align: 'center', width: 60 },
        { field: 'businessTime', title: '业务日期', width: 120,
          slots: {
            default: (params) => {
              const { row, column } = params
              return [getBusinessTime(row[column.property])]
            }
          }},
        { field: 'billNo', title: '单据', width: 150,
          slots: {
            default: ({ row }) => {
              const { billCat, billNo, billId } = row
              if (billCat === 'account_trans') {
                const data = {
                  props: { billId }
                }
                return [<transdetail {...data}/>]
              }
              const data = {
                props: {
                  type: 'primary'
                },
                on: {
                  'click': () => { this.jump2target(row) }
                }
              }
              return [<el-link {...data}>{billNo}</el-link>]
            }
          }},
        { field: 'comegoName', title: '往来单位', width: 150 },
        { field: 'billCatName', title: '项目名称', width: 120,
          slots: {
            default: ({ row }) => {
              const { billCatName, isCancleBill } = row
              if (isCancleBill === '1') {
                return [`作废${billCatName}`]
              }
              return [billCatName]
            }
          }
        },
        { field: 'handUserName', title: '经手人', width: 100 },
        { field: 'accountName', title: '结算账户', width: 100 },
        { field: 'amount', align: 'right', title: '收入', width: 100,
          slots: {
            default: ({ row }) => {
              const { cat, amount } = row
              if (cat === '1') {
                return [amount]
              }
            }
          }
        },
        { field: 'amount', align: 'right', title: '支出', width: 100,
          slots: {
            default: ({ row }) => {
              const { cat, amount } = row
              if (cat === '0') {
                return [amount]
              }
            }
          }
        },
        { field: 'remainAmount', align: 'right', title: '当前余额', width: 100 },
        { field: 'remarks', title: '备注', width: 200 }
      ]
    }
  },
  watch: {
  },
  created() {
    this.initData()
  },
  methods: {
    btnSearch() {
      this.setBtnLoading('search', true)
      this.getListData().then(res => {
        this.setBtnLoading('search', false)
      }).catch(err => {
        console.log(err)
        this.setBtnLoading('search', false)
      })
    },
    initData() {
      this.getListData()
    },
    getListData(params = { data: this.searchData, page: this.pageInfo }) {
      this.setTableLoading('table', true)
      return new Promise((resolve, reject) => {
        getListData(params).then(res => {
          this.setTableLoading('table', false)
          if (!res.data.data) return
          const { records, total } = res.data.data
          this.setTableData('table', records)
          this.pageInfo.total = total
          resolve(res)
        }).catch(err => {
          this.setTableLoading('table', false)
          this.$notify.error({ title: '查询异常！', message: err.message })
          reject(err)
        })
      })
    },
    getRowClassName({ row, rowIndex, $rowIndex }) {
      if (row.isCancle === '1') {
        return 'table-row-gray'
      }
    },
    jump2target(data) {
      const { billCat, billId } = data
      const nameMap = {
        'purchase': 'PurchaseDetail',
        'purchase_return': 'PurchaseReturnDetail',
        'sale': 'SaleDetail',
        'sale_return': 'SaleReturnDetail'
      }
      this.$router.push({
        name: nameMap[billCat],
        query: { billId }
      })
    },
    // on
    onSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
      this.getListData()
    },
    onCurrentChange(val) {
      this.pageInfo.current = val
      this.getListData()
    },
    onCheckBoxChange() {
      this.getListData()
    }
  }
}
</script>
<style lang="scss" scoped>
 .canuse-info{
     color: #636363;
     text-align: center;
     line-height: 26px;
     b { font-size: 24px;}
  }
</style>
